<template>
  <div class="w-[1500px] mx-auto bg-white pb-12 clearfix">
    <div class="h-44 mx-auto pt-5">
      <img class="float-left w-32 h-32 ml-10" :src="`http://127.0.0.1:8081${businessInfoData.businessImage}`" alt="">
      <div class="float-left">
        <div class="text-2xl ml-4 mt-2">{{ businessInfoData.businessName }}</div>
        <div class="inline-block text-base ml-4 mt-2">{{ businessInfoData.businessAddress }}</div>
        <div class="inline-block text-base ml-4">{{ businessInfoData.businessPhone }}</div>
        <div class="text-base ml-4 mt-2">{{ businessInfoData.businessProfile }}</div>
      </div>
      <div class="float-right m-14 bg-rose-500">
        <input class="w-80 h-10 border-2 border-solid border-rose-500 pl-3 bg-white" type="text" v-model="interContent">
        <button class="w-24 h-10 text-white" @click="getData()">搜本店</button>
      </div>
    </div>
    <div class="clearfix w-[1500px] bg-zinc-100 mx-auto py-4 my-4">
      <div
        class="w-[23%] h-[480px] float-left mt-2.5 mx-3.5 px-3 py-2.5 border-2 border-solid border-zinc-300 hover:border-rose-500"
        v-for="item in productInfoData" :key="item" @click="commodityDetail(item.productId)">
        <img class="w-full h-2/3" :src="`http://127.0.0.1:8081${item.productImage}`" alt="">
        <span
          class="title inline-block text-xl font-bold mt-2 text-ellipsis overflow-hidden">{{ item.productProfile }}</span>
        <span class="text-red text-2xl font-bold">￥{{ item.sellPrice }}</span>
        <div class="mt-2">
          <span class="float-left">{{ item.businessName }}</span>
          <span class="float-right">{{ item.businessAddress }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      interContent: '',
      businessId: window.localStorage.getItem( "businessId" ),
      productInfoData: [],
      businessInfoData: {
        businessImage: '',
        businessName: '',
      }
    }
  },
  mounted() {   // 钩子函数
    this.getData()
  },
  methods: {
    getData() {
      axios( {
        url: 'http://127.0.0.1:8081/api/selectBusinessInfoByBusinessId',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "userToken" ),
          businessId: this.businessId,
          productName: this.interContent,
        }
      } ).then( res => {
        this.businessInfoData = res.data.data.businessInfo
        this.productInfoData = res.data.data.productInfoList
      } )
    },
    // 页面跳转
    commodityDetail( productId ) {
      window.localStorage.setItem( "productId", productId );
      this.$router.push( '/commodityDetail' )
    },
  }
}
</script>

<style scoped >
.clearfix:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
</style>